<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" title='地图分布' :close-on-click-modal="false" :close-on-press-escape="false">
    <!-- 高德地图 -->
    <div v-if="visible" id="container"></div>
    <template slot="footer">
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      map: null,
    }
  },
  props:{
    dataList: {
      type: Array,
      default: []
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.list = this.dataList
        let center = []
        if (this.list.length > 0) {
          center[0] = this.list[0].lng
          center[1] = this.list[0].lat
        } else {
          center = [119.542197, 39.943673]
        }
        //地图初始化
        this.map = new AMap.Map('container', {
          resizeEnable: true,//是否监控地图容器尺寸变化
          zoom: 15,//地图显示的缩放级别
          zooms: [3, 18],//地图显示的缩放级别范围在PC上，默认为[3,18]，取值范围[3-18]；
          viewMode: '2D',//默认为‘2D’，可选’3D’，选择‘3D’会显示 3D 地图效果
          center: center, // 初始化地图中心点位置
        })
        //加载工具条
        this.addTool();
        this.setMarks()
      });
    },
    setMarks() {
      this.list.forEach((item, index) => {
        this.$nextTick(() => {
          let marker = new AMap.Marker({
            position: [Number(item.lng), Number(item.lat)],
            title: item.name,
          });
          this.map.add(marker);
          marker.setLabel({
            content: item.name,//显示内容
          })
        })
      });
    },
    //工具条
    addTool() {
      AMap.plugin(['AMap.ToolBar'], () => {
        let toolbar = new AMap.ToolBar()
        this.map.addControl(toolbar)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 550px;
  z-index: 1;
}
</style>
